import * as React from 'react';
import { connect } from 'react-redux';
import { Tag, Switch, Select, message, Form, Input, Button } from 'antd';
import { get, trim } from 'lodash';

import { isLoading } from 'utils/utils';

import ACTIONS from 'constants/knowledge';
import partOfSpeech from 'constants/partOfSpeech';

const { Option } = Select;

interface BasicProps {
  dispatch: (action: any) => any;
  form: any;
  editWord: any;
  loadingGroup: any;
}
class EditBasic extends React.Component<BasicProps> {
  loadingKey: string;
  static defaultProps: BasicProps = {
    dispatch: () => {},
    form: {},
    editWord: null,
    loadingGroup: {},
  };

  componentDidMount() {
    const { editWord } = this.props;
    if (editWord) {
      this.initForm(editWord);
    }
  }

  componentWillReceiveProps(nextProps: any) {
    const { editWord } = nextProps;
    const { editWord: oldEditWord, form } = this.props;
    const id = get(editWord, 'id', 0);
    const oldId = get(oldEditWord, 'id', 0);
    if (id !== oldId) {
      this.initForm(editWord);
    }
  }

  initForm = (editWord: any) => {
    const { form } = this.props;

    form.setFieldsValue({
      name: get(editWord, 'name', null),
      chinese: get(editWord, 'chinese', null),
      partOfSpeech: get(editWord, 'partOfSpeech', null),
    });
  };

  render() {
    const { loadingGroup, form, editWord } = this.props;
    const loadingKey = editWord ? ACTIONS.UPDATE : ACTIONS.CREATE;
    const { getFieldDecorator } = form;

    const horizontalLayout = {
      labelCol: { span: 2, style: { textAlign: 'left' } },
      wrapperCol: { span: 18, style: { textAlign: 'left' } },
    };

    return (
      <>
        <Form.Item label="英文">
          {getFieldDecorator(`name`, {
            rules: [
              {
                required: true,
                message: '英文是必填项',
              },
            ],
          })(<Input placeholder="英文" autoComplete="off" />)}
        </Form.Item>
        <Form.Item label="中文">
          {getFieldDecorator(`chinese`, {
            rules: [
              {
                required: true,
                message: '中文是必填项',
              },
            ],
          })(<Input placeholder="中文" autoComplete="off" />)}
        </Form.Item>
        <Form.Item label="词性">
          {getFieldDecorator('partOfSpeech', {
            rules: [
              {
                required: true,
                message: '词性是必选项',
              },
            ],
          })(
            <Select placeholder="请选择词性" style={{ width: '100%' }}>
              {partOfSpeech.map((item: any) => {
                return (
                  <Option key={item} value={item}>
                    {item}
                  </Option>
                );
              })}
            </Select>
          )}
        </Form.Item>
      </>
    );
  }
}

interface OwnProps {
  editWord: any;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { loadingGroup } = state;
  const { editWord } = ownProps;

  return {
    loadingGroup,
    editWord,
  };
}

export default connect(mapStateToProps)(EditBasic);
